// Button
//
// In addition to the default styling of `<button>` and
// `<input type="submit|image|reset|button">` elements, the `.button` class and
// its variants can apply buttons styles to various elements (like an `<a>`
// link).
//
// :hover  - Hover styling.
// :active - Depressed button styling.

.button,
%button,
button,
[type='button'],
[type='reset'],
[type='submit'] {
  // sass-lint:disable no-color-hex, no-color-literals
  @extend %button--disabled;
  @include typeface(headings);
  @include margin-right(.75);
  @include margin-bottom(.75);
  // Some styles don't apply to <a> links since they are inline elements by default.
  display: inline-block;
  padding: 2px 10px;
  // Address Firefox 4+ setting `line-height` on `input` using `!important` in
  // the UA stylesheet. And prevent its "line-height: normal" rule below from
  // breaking the "appearance: button" styling on the input elements.
  line-height: inherit;
  text-decoration: none;
  // Improve usability and consistency of cursor style between image-type `input` and others.
  cursor: pointer;
  color: $button;
  text-align: center;
  background-image: linear-gradient(#f6f6f6, #e2e2e2);
  border: 1px solid #e4e4e4;
  border-left-color: #d2d2d2;
  border-right-color: #d2d2d2;
  border-bottom-color: #b4b4b4;
  border-radius: 2px;

  // sass-lint:disable no-vendor-prefixes
  // Correct the inability to style clickable types in iOS and Safari.
  -moz-appearance: button;
  -webkit-appearance: button;

  // Remove the inner border and padding in Firefox.
  &::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  // Restore the focus styles unset by the previous rule.
  &:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  // sass-lint:enable no-vendor-prefixes

  &:hover,
  &:focus,
  &:active {
    // Override any link underlines and color changes.
    text-decoration: none;
    color: $button;
  }

  &:active {
    border-color: #555;
    text-shadow: $button 0 -1px 0;
    background: $grey-dark;
    color: $text-bg;
  }
}

// Add button variations here.
.button,
%button {
  &--variant-name {
    // Add styles here.
  }
}

// The disabled variation should always go last, so that it overrides any
// other variations.
%button--disabled[disabled] {
  // Re-set default cursor for disabled elements.
  cursor: default;
  color: $button-disabled;
  background-color: $grey-extra-light;
  border-color: $grey-extra-light;
  background-image: none;
  text-shadow: none;

  &:hover,
  &:focus,
  &:active {
    // Override any link underlines and color changes.
    color: $button-disabled;
  }
}
